<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/yuding.css"/>
<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/index.js"></script>
<script src="/js/vue-qriously.js"></script>
<link rel="stylesheet" href="/css/index.css">

<body>
<div id="app">
    <div>
        <iframe scrolling="no" frameborder="0" src="../head/head.html" width="100%" height="27"></iframe>
    </div>
    <div class="top">
        <iframe scrolling="no" src="../top/top.html" frameborder="0" width="100%" height="110"></iframe>
    </div>
    <div class="menu">
        <iframe scrolling="no" src="../daohang/meizu.html" frameborder="0" width="100%" height="50"></iframe>
    </div>
    <div class="container">
        <div class="bgcolor_white">
            <div class="cur_position">您的位置：<a @click="home()">首页</a> &gt;&nbsp;&nbsp;门票预订</div>

            <div class="yd_1200">
                <div class="step stepfour">
                    <ul>
                        <li class="step1">选择景点</li>
                        <li class="step1">填写订单</li>
                        <li class="step2">在线支付</li>
                        <li class="step3">预约成功</li>
                    </ul>
                </div>
            </div>

            <div class="yd_1200">
                <!--                右侧图片-->
                <div class="adlist">
                    <ul>
                        <li><a><img src="images/201409171010380202785.png"/></a></li>
                    </ul>
                </div>
                <!--                应该付款的地方-->
                <div class="dd_left">
                    <div class="tichet_yd">
                        <span class="ticket_title">应付金额{{data.money}}元</span>
                        <table width="910" border="0" cellspacing="0" cellpadding="0" class="ticket_tab_xx">
                            <tr>
                                <th width="230">订单编号</th>
                                <th width="200">门票类型</th>
                                <th width="120">游玩日期</th>
                                <th width="120">门票单价</th>
                                <th width="120">门票数量</th>
                                <th width="120">支付方式</th>
                            </tr>
                            <!--                            门票信息-->
                            <tr>
                                <td align="center">{{orderNo}}</td>
                                <td>{{data.ScenicTicket.name}}</td>
                                <td align="center" class="time">
                                    {{data.date}}
                                </td>
                                <td align="center">￥{{data.ScenicTicket.dprice}}</td>
                                <td align="center" class="time">
                                    {{data.quantity}}张
                                </td>
                                <td align="center">景区支付</td>
                            </tr>

                            <tr>
                                <td colspan="5">合计</td>
                                <td align="center">￥{{data.money}}</td>
                                <td><button @click="deleteOder()" class="yd_btn">取消订单</button></td>
                            </tr>

                        </table>
                    </div>
                    <!--                    支付页面-->
                    <!--                    <div class="tichet_yd"><img :src="payImg"/></div>-->
                    <qriously class="tichet_yd" style="text-align: center;" :value="code_url" :size="338"/>
                    <!--                    下一步-->
                    <!--                    <div class="tijiao"><a @click="next()" target="_blank">下一步</a></div>-->
                </div>
            </div>
            <div class="footer">
                <iframe scrolling="no" src="../footer/foot.html" frameborder="0" width="1200" height="120"
                        _height="120"></iframe>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                orderNo: "",//订单id
                checkUser: {},//用户
                data: {},//前台选择传来的参数
                code_url: "",//微信支付二维码
                date:"",//现实格式化的时间
                timer1:"",//定时器
                paystatus:"",//记录
                order:{},//订单
            }
        },
        //钩子
        created: function () {
            //判断用户是否登录
            this.getUser();
        },
        methods: {
            //判断用户
            getUser() {
                let _this = this
                axios.get('/tuser/tick')
                    .then(function (response) {
                        if (response.data.code == 200) {
                            //初始化信息
                            _this.checkUser = response.data.data
                            //页面传来的参数
                            let data = JSON.parse(localStorage.getItem("data"));
                            data.date = data.date.split("T")[0]
                            _this.data = data;
                            //生成订单编号
                            _this.orderNo = "dingdan"+new Date().getTime()
                            //获取二维码
                            _this.getPay();
                        } else {
                            alert("请先登录，再进行订票操作1111")
                            setTimeout(function () {
                                top.location.href = "/html/front/t-login.html"
                            }, 1000); // 定时时间
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //添加订单
            getPay(){
                //封装order
                this.order = {
                    "scenicid":this.data.ScenicTicket.scenicid,//景区代码
                    "orderno":this.orderNo,//订单id
                    "ywrq":this.data.date,//游玩日期
                    "zczfsj":this.data.date,//最迟取票日期
                    "zcqprq":this.data.date,//最迟取票日期
                    "ptype":"微信支付",//支付方式
                    "ticketid":this.data.ScenicTicket.id,//门票id
                    "scenicname":this.data.ScenicTicket.ttype,//景点名称
                    "ticketname":this.data.ScenicTicket.name,//门票名称
                    "zcdpsj":this.data.date,//最迟订票日期
                    "price":this.data.ScenicTicket.dprice,//单价
                    "tcount":this.data.quantity,//总票数
                    // "tprice":this.data.money,//总票价
                    "tprice":0.01,//总票价
                    "qprname":this.data.fcontact1.name,//取票人名字
                    "qprsj":this.data.date,//取票人时间
                    "userid":this.checkUser.id,//用户id那个用户的订单
                    "codeid":'',//订单状态
                    "state":"",//状态（详见说明）
                    "ordertime":"",//下单时间
                }
                let _this = this
                //添加订单
                axios.post('/tsb/TsbAdd',_this.order)
                    .then(function (response) {
                        console.log(JSON.stringify(response.data))
                        if (response.data.code == 200) {
                            _this.order = response.data.data;
                            console.log(JSON.stringify(_this.order)+"订单信息")
                            //获取二维码
                            _this.getPayment()
                        } else {
                            alert("请先登录，再进项操作1111")
                            setTimeout(function () {
                                top.location.href = "/html/front/t-login.html"
                            }, 1000); // 定时时间
                        }
                    }).catch(function (error) {
                    console.log(error);
                });



            },
            //主页
            home() {
                top.location.href = "/html/lvyoule_11_10/indexshiyan.html";
            },
            //获取支付二维码
            getPayment(){
                let _this = this
                axios.post('/pay/getNativeCodeUrl',_this.order)
                    .then(function (response) {
                        console.log(JSON.stringify(response.data))
                        if (response.data.code == 200) {
                            //赋值给微信支付
                            _this.code_url=response.data.data.code_url;
                            //定时器获取订单状态
                            _this.timer1=setInterval(()=>{
                                _this.queryPayStatus();
                            },3000)
                        } else {
                            alert("请先登录，再进项操作22222")
                            setTimeout(function () {
                                top.location.href = "/html/front/t-login.html"
                            }, 1000); // 定时时间
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //判断是否付款
            queryPayStatus(orderNo) {
                var _this = this;
                axios.get("/pay/getPayStatus/" + _this.order.orderno)
                    .then(function (response) {
                        console.log(JSON.stringify(response.data))
                        _this.paystatus = response.data.data.trade_state_desc;
                        if (_this.paystatus == "支付成功") {
                            clearInterval(_this.timer1);
                            //修改订单状态
                            _this.setOrderA();
                            top.location.href = "dd_success.html?orderNo="+_this.orderNo
                        }
                    });
            },
            //修改订单状态
            setOrderA(){
                var _this = this;
                axios.post("/tsb/TsbUpdate",_this.order)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            //添加流水
                            _this.addPay();
                        } else {
                            alert(response.data.data)
                        }
                    })
            },
            //添加流水状态
            addPay(){
                //封装一个参数给流水记录
                let TBsnPay = {
                    "orderno":this.orderNo,
                    "serialno":new Date().getTime()+"liushui",
                    "pje":this.order.tprice,
                    "ptime":new Date(),
                    "respcode":"200",
                    "result":"1",
                    "fullmsg":JSON.stringify(this.order)
                }
                // alert(JSON.stringify(TBsnPay))
                var _this = this;
                axios.post("/pay",TBsnPay)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            top.location.href = "dd_success.html?orderNo="+_this.orderNo
                        } else {
                            alert(response.data.data)
                        }
                    })
            },
            deleteOder(){
                let _this = this
                this.$confirm('是否取消该订单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/tsb/TsbDelete/" +_this.order.orderno)
                        .then(function (response) {
                            top.location.href = "/html/lvyoule_11_10/yuding/yuding.html?scid="+_this.order.scenicid;
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
    })
</script>
</body>
</html>
